<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户管理</title>
		<script src="../js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="../js/layui/layui.js"></script>
		<link rel="stylesheet" type="text/css" href="../js/layui/css/modules/layui-icon-extend/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../js/layui/css/layui.css" />
	</head>
	<body>
		<!-- 添加窗体 -->
	<div id="addUser" style="display: none">
		<form class="layui-form" id="my_question">
			<div class="layui-form-item">
				<label class="layui-form-label">登录名</label>
				<div class="layui-input-inline">
					<input type="text" id="loginname" name=""autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">密码</label>
				<div class="layui-input-inline">
					<input type="password" id="password" name=""  autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">邮箱</label>
				<div class="layui-input-inline">
					<input type="email" id="email" name=""   autocomplete="off"class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">手机号码</label>
				<div class="layui-input-inline">
					<input type="text" id="phone" name="" autocomplete="off"  class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button type="button" class="layui-btn layui-btn-warm"
						onclick="saveAddUserBtn()">保存</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>		
		<!-- 修改窗体 -->
	<div id="updateaddUser" style="display: none">
		<form class="layui-form"  lay-filter="fm">
			<div class="layui-form-item">
				<label class="layui-form-label">登录名</label>
				<div class="layui-input-inline">
					<input type="text" id="uloginname" name="loginName"autocomplete="off" disabled="disabled" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">邮箱</label>
				<div class="layui-input-inline">
					<input type="email" id="uemail" name="protectEmail"   autocomplete="off"class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">手机号码</label>
				<div class="layui-input-inline">
					<input type="text" id="uphone" name="protectMtel" autocomplete="off"  class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button type="button" class="layui-btn layui-btn-warm" onclick="saveUpdateUserBtn()">保存</button>
				</div>
			</div>
		</form>
	</div>
		<!-- 穿梭框给设置用户角色 -->
		<div id="operWin" style="display: none;">
			<div style="text-align: center;">
			<div id="test1" class="demo-transfer"></div>
			</div>
		</div>
		<!-- 数据表格 -->
		<div class="layuimini-container">
			<div class="layuimini-main">
				<!-- 检索框 -->
				<div class="layui-form ">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">用户名</label>
							<div class="layui-input-block">
								<input name="id" id="uname" class="layui-input" type="text" placeholder="请输入" autocomplete="off"/>
							</div>
						</div>
						<div class="layui-inline">
                            <label class="layui-form-label">创建时间</label>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="text" id="begin" name="startentertime" placeholder="创建时间前" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid">-</div>
                                <div class="layui-input-inline" style="width: 100px;">
                                   <input type="text" id="end" name="endentertime" placeholder="创建时间后" autocomplete="off" class="layui-input">
                                </div>
                        </div>
						<div class="layui-inline">
							<label class="layui-form-label">是否锁定</label>
							<div class="layui-input-block">
                                <select id="isLock" >
                                    <option value="">--请选择--</option>
                                    <option value="是">是</option>
                                    <option value="否">否</option>
                                 </select>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">IS名称排序</label>
							<div class="layui-input-block">
								<input type="radio" name="isorderBy" value="LoginName" title="是" checked="">
								<input type="radio" name="isorderBy" value="" title="否">
							</div>
						</div>
						<div class="layui-inline">
                            <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" title="检索" onclick="searchBtn()"><i class="layui-icon">&#xe615</i></button>
                        </div>
					</div>
				</div>
			<div class="layui-card-body layui-admin-card-body">
				<table class="layui-hide" id="test" lay-filter="test"></table>
			</div>
			</div>
		</div>
		
		
		<script type="text/html" id="toolbarDemo">
		<div class="layui-btn-group" >
			<input class="layui-btn layui-btn-normal layui-btn-radius"  type="button" value="添加" onclick="addUserBtn()"/>
    	</div>
		</script>
		<script type="text/html" id="barDemo">
		  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		  <a class="layui-btn layui-btn-warm layui-btn-xs" title="重置角色" lay-event="oper">设置</a>
		  <a class="layui-btn layui-btn-primary layui-btn-xs" title="密码重置" lay-event="replacement">重置</a>
		   {{# if (d.isLockout ==="是"){}}
		       <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="clear"><i class="iconfont layui-extend-jiesuo"></i>解锁</a>
		   {{#  } else { }}
		       <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="lock"><i class="iconfont layui-extend-suoding"></i>锁定</a>
		   {{#}}}
		</script>
		<script>
			var globalUrl = window.localStorage.getItem("globalUrl");
			var token = window.localStorage.getItem("token");
			var tableObj,index,uindex;
			$(function(){
				searchBtn();
				
			})
			function searchBtn(){
				var uname = $("#uname").val();
				var begin = $("#begin").val();
				var end = $("#end").val();
				var islock = $("#isLock").val();
				var isorderBy = $("#isorderBy").val();
				var isorderBy = $("input[name='isorderBy']:checked").val();
				
				layui.use(['element','transfer','util','layer','laydate','form','table'],function(){
								var element = layui.element;
								var $ = layui.jquery;
								var transfer = layui.transfer;
								var util = layui.util;
								var form = layui.form;
								var table = layui.table;
								var laydate = layui.laydate;
								var layer = layui.layer;
								laydate.render({
									elem:"#begin"
								})
								laydate.render({
									elem:"#end"
								})
								
					/* 渲染数据表格 */
					tableObj=table.render({
					  elem: '#test'
					  ,toolbar: '#toolbarDemo'
					  ,url:'/api/GetUsersLayUI'
					  ,method:'post'
					  ,cellMinWidth:96
					  ,where:{
						userName:uname,
						beginDate:begin,
						endDate:end,
						isLock:islock,
						orderBy:isorderBy,
						token:token
								}
					  ,title: '用户数据表'
					  ,cols: [[
					    {type: 'checkbox', fixed: 'left'}
					    ,{field:'id', title:'ID', fixed: 'left', unresize: true, sort: true}
					    ,{field:'loginName', title:'用户名', sort: true}
					    ,{field:'lastLoginTime', title:'最后登录时间'}
					    ,{field:'createTime', title:'创建时间'}
					    ,{field:'psdWrongTime', title:'密码错误次数', sort: true}
						,{field:'isLockout', title:'是否锁定',sort: true,templet:showStatus}
					    ,{field:'lockTime', title:'锁定时间'}
					    ,{field:'protectEmail', title:'邮箱', sort: true}
					    ,{field:'protectMtel', title:'手机号'}
					    ,{fixed: 'right', title:'操作',  width:293,toolbar: '#barDemo',fixed: 'right' }
					  ]]
					  ,page: true
					});
					//监听行工具事件
					table.on('tool(test)', function(obj){
						var data = obj.data;
						var uid = data.id;
						var loginName = data.loginName;
						if(obj.event === 'del'){
						//console.log("删除");
						layer.confirm('真的删除行么', function(index){
							$.post('/api/DeleteUser',{
								uid:uid,
								token:token
							},function(res){
								if(res.success){
									layer.msg("删除成功",{icon: 6});
									tableObj.reload();
								}else{
									layer.msg("删除失败",{icon: 5});
									tableObj.reload();
								}
							},"json");
						  layer.close(index);
						});
						} else if(obj.event === 'edit'){
				    	  form.val('fm',data);
						    uindex= layer.open({
						    	//form.val('fm',data);
						    	 type:1
						    	 ,title:"用户信息修改"
						    	 ,content:$("#updateaddUser")
						    	 ,area:["369px","330px"]
							})
						}else if(obj.event === 'oper'){
							//求所有角色
							$.ajax({
								url:"/api/GetRolesAll",
								data:{
									token:token
								},
								dataType:"json",
								type:"post",
								success:function(res){
									//获取当前用户角色
									$.ajax({
										url:'/api/GetRolesByUserIdLayUI',
										data:{
                                            uId:uid,
											token:token
										},
										dataType:"json",
										type:"post",
										success:function(right){
											//console.log(data)
											//将角色的ID存储在里面，进行穿梭狂右边数据的初始化
											var uids=[];
											for(var i=0;i<right.data.length;i++){
												uids[i] = right.data[i].uid;
											}
											transfer.render({
											  elem: '#test1',
											  //解析数据格式
											  parseData: function(res){
											        return {
											          "value": res.uid //ID
											          ,"title": res.roleNames //角色名
											        }
											      },
											  height:369, //定义高度
											  title: ['所有角色', '当前用户角色'],
											  showSearch: true,
											  data: res,
											  value:uids,
											  onchange:function(obj,index){
											  	
											  	if(index == 0){
											  		//选中左边角色为当前用户设置
											  		if(obj.length>1){
											  			layer.msg("每次只能设置一个角色给用户");
											  		}else{
											  			$.ajax({
											  				url:'/api/AddUserToRole',
											  				data:{
											  					uId:uid,
											  					rId:obj[0].value,
											  					token:token
											  				},
											  				dataType:"json",
											  				type:"post",
											  				success:function(res1){
                                                                console.log(res1)
											  					if(res1.success){
											  						layer.msg("添加角色成功");
											  					}
											  				}
											  			})
											  		}
											  		
											  	}else if(index==1){
											  		//选中右边为当前用户移除角色
											  		if(obj.length>1){
											  			layer.msg("每次只能设置一个角色给用户");
											  		}else{
											  			$.ajax({
											  				url:"/api/RemoveUserFromRole",
											  				data:{
											  					uId:uid,
											  					rId:obj[0].value,
											  					token:token
											  				},
											  				dataType:"json",
											  				type:"post",
											  				success:function(res1){
											  					if(res1.success){
											  						layer.msg("移除角色成功");
											  					}
											  				}
											  			})
											  		}
											  	}else{
											  		layer.msg("未选中数据");
											  	}
											  }
											})
										}
									})
									
									
	
								}
							})
							//console.log("设置")
							layer.open({
								type:1
								,title:"为"+data.loginName+"设置角色"
								,anim: 1
								,content:$("#operWin")
								,area:["569px","500px"]
							})
						}else if(obj.event === 'replacement'){
							layer.confirm('确定重置吗', function(index){
								$.post('/api/ResetPassword',{
									un:loginName,
									token:token
								},function(res){
									if(res.success){
										layer.msg("密码重置成功",{icon: 6});
										tableObj.reload();
									}else{
										layer.msg("密码重置失败",{icon: 5});
										tableObj.reload();
									}
								},"json");
							  layer.close(index);
							});
						}else if(obj.event === 'lock'){
						  layer.confirm('确定锁定用户吗', function(index){
						  	$.post('/api/LockUser',{
						  		un:loginName,
						  		token:token
						  	},function(res){
						  		if(res.success){
						  			layer.msg("锁定成功",{icon: 1});
						  			tableObj.reload();
						  		}else{
						  			layer.msg("锁定失败",{icon: 2});
						  			tableObj.reload();
						  		}
						  	},"json");
						    layer.close(index);
						  });
					}else if(obj.event === 'clear'){
						layer.confirm('确实解锁吗', function(index){
							$.post('/api/UnLockUser',{
								un:loginName,
								token:token
							},function(res){
								if(res.success){
									layer.msg("解锁成功",{icon: 1});
									tableObj.reload();
								}else{
									layer.msg("解锁失败",{icon: 2});
									tableObj.reload();
								}
							},"json");
						  layer.close(index);
						});
					}
					})
					
				})
				
			}
		//点击修改保存
		   function saveUpdateUserBtn(){
		   	var uloginname = $("#uloginname").val();
		   	var uemail = $("#uemail").val();
		   	var uphone = $("#uphone").val();
		   	 if(uemail==""){
		   		 layer.msg("邮箱不能为空");
		   	}else if(uphone==""){
		   	 layer.msg("手机号码不能为空");
		   	}else{
		   	 	$.post('/api/UpdateUser',{
		   	 		loginName:uloginname,
		   	 		email:uemail,
		   	 		mtel:uphone,
		   	 		token:token
			   	},function(res){
			   		if(res.success){
			   			//关闭窗体
						layer.msg("修改成功",{icon: 6});
			  			layer.close(uindex);
			  			tableObj.reload();
			   		}else{
						layer.msg("修改失败",{icon: 5});
					}
			   	},"json");
		   	}
		  
		   }
		   //点击添加按钮
		   function addUserBtn(){
		   	layui.use("layer",function(){
		   		var layer = layui.layer;
		   		index = layer.open({
		   			type:1
		   			,title:"添加用户信息",
		   			content:$("#addUser")
		   			,area:["369px","330px"]
		   	})
		   	})
		   }
		//点击添加保存
		   function saveAddUserBtn(){
		   	var loginname = $("#loginname").val();
		   	var password = $("#password").val();
		   	var email = $("#email").val();
		   	var phone = $("#phone").val();
		   	 if(loginname==""){
		   		 layer.msg("用户名不能为空");
		   	}else if(password==""){
		   	 layer.msg("密码不能为空");
		   	}else if(email==""){
		   	 layer.msg("邮箱不能为空");
		   	}else if(phone==""){
		   	 layer.msg("手机号码不能为空");
		   	}else{
		   	 	$.post('/api/CreateUser',{
		   	 		loginName:loginname,
		   	 		pwd:password,
		   	 		email:email,
		   	 		mtel:phone,
		   	 		token:token
			   	},function(res){
			   		if(res.success){
						$("#my_question")[0].reset();
			   			//关闭窗体
						layer.msg(res.remark,{icon: 6});
			  			layer.close(index);
			  			tableObj.reload();
			   		}else{
						layer.msg(res.remark,{icon: 5});
					}
			   	},"json");
		   	}
		  
		   }
		   //按钮显示
		   function showStatus(data) {
		       var status = data.isLockout;
		       var result;
		       if (status == '是') {
		           result = '<input class="layui-btn layui-btn-danger layui-btn-xs" disabled="disabled" type="button" value="锁定" onclick="addUserBtn()"/>';
		       }
		       if (status == '否') {
		           result = '<input class="layui-btn layui-btn-xs layui-btn-normal" disabled="disabled" type="button" value="正常" onclick="addUserBtn()"/>';
		       }
               if (status == null) {
                   result = '未填';
               }
		       return result;
		   }
		</script>
	</body>
</html>
